<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>请假流程列表</title>
    <link rel="stylesheet" href="../../plugins/layui/css/layui.css">
</head>
<body>
<script type="text/html" id="operation">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="view">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="approval">审核</a>
</script>
<!--<form class="layui-form" action="/sys/generator/tableList">
    <div class="layui-inline">
        <label class="layui-form-label">输入框</label>
        <div class="layui-input-block">
            <input type="text" id="tableName" name="tableName" required  lay-verify="required" placeholder="请输入表明" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-inline">
        <div class="layui-input-block">
            <button class="layui-btn" onclick="submitForm();" type="button">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>-->
<table id="demo" lay-filter="test"></table>
<script src="../../plugins/layui/layui.js"></script>
<script src="../../js/root.js"></script>
<script src="../../libs/jquery.min.js"></script>
<script>
    var table;
    var root = getRoot();
    layui.use('table', function(){
        table = layui.table;

        //第一个实例
        table.render({
            elem: '#demo',
            url: '/leave/tableList', //数据接口
            page: true, //开启分页
            //表头
            cols: [[
                {field: 'id', title: '序号', width:100, sort: true, fixed: 'left'},
                {field: 'leaveId', title: '主键id', width:100, hide: true},
                {field: 'applyUser', title: '申请人', width:100 },
                {field: 'day', title: '申请天数', width:100 },
                {field: 'status', title: '状态', width:100 },
                {field: 'createTime', title: '创建日期', width:350, templet: function (d) {
                    return layui.util.toDateString(d.createTime);
                }},
                {fixed: 'right', title: '操作', align:'center', toolbar: '#operation'}
            ]],
            done: function(res, curr, count){
                console.log(res);
                console.log(curr);
                console.log(count);
            }
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var layer = layui.layer;
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent == 'view'){
                console.log(data);
                layer.open({
                    skin: 'layui-layer-rim', //加上边框
                    title: '内容',
                    closeBtn: 1,
                    area: ['860px', '510px'],
                    content: '<div class="layui-form-item">\n' +
                        '\t<label class="layui-form-label">请假人</label>\n' +
                        '    <div class="layui-input-block">\n' +
                        '\t\t<label class="layui-form-label">'+ data.applyUser+'</label>\n' +
                        '    </div>\n' +
                        '</div>\n' +
                        '<div class="layui-form-item">\n' +
                        '\t<label class="layui-form-label">请假天数</label>\n' +
                        '\t<div class="layui-input-block">\n' +
                        '\t\t<input value="'+ data.day+'" type="text" disabled  required  lay-verify="required" autocomplete="off" class="layui-input">\n' +
                        '\t</div>\n' +
                        '</div>\n' +
                        '<div class="layui-form-item">\n' +
                        '\t<label class="layui-form-label">审批人</label>\n' +
                        '\t<div class="layui-input-block">\n' +
                        '\t\t<label class="layui-form-label">'+ data.approvelUser+'</label>\n' +
                        '\t</div>\n' +
                        '</div>'

                });
            }
            if(layEvent == 'approval') {
                layer.open({
                    // layer提供了5种层类型。可传入的值有：0（信息框，默认）   1（页面层）    2（iframe层）    3（加载层）     4（tips层）
                    type: 0,
                    title: '审批',
                    // title: false,
                    // 自定义标题区域样式，那么你可以title: ['文本', '']，数组第二项可以写任意css样式
                    // title: ['在线文本', 'color:red;font-size:20px'],
                    content: '审批确认',
                    // 目前layer内置的skin有：layui-layer-lan   layui-layer-molv  demo-class 默认
                    skin: 'layui-layer-molv',
                    btn: ['通过', '驳回'],
                    icon: 6,
                    yes: function (index, layero) {
                        //按钮【按钮一】的回调
                        console.log(data);
                        $.ajax({
                            url:'/leave/approval',
                            dataType:'text',
                            data: {
                              "status": 1,
                               "id": data.leaveId
                            },
                            success:function (data) {
                                data = eval('(' + data + ')');
                                if (data.code == '200'){
                                    table.reload('demo');
                                } else {
                                    alert(data.message);
                                }
                            }
                        })
                        layer.close(index);
                        //return false 开启该代码 点击该按钮 不关闭
                    },
                    btn2: function (index, layero) {
                        //按钮【按钮二】的回调
                        $.ajax({
                            url:'/leave/approval',
                            dataType:'text',
                            data: {
                                "status": 2,
                                "id": data.leaveId
                            },
                            success:function (data) {
                                data = eval('(' + data + ')');
                                if (data.code == '200'){
                                    table.reload('demo');
                                } else {
                                    alert(data.message);
                                }
                            }
                        })
                        //return false 开启该代码 点击该按钮 不关闭
                    },
                    cancel: function () {
                        //右上角关闭回调

                        //return false 开启该代码可禁止点击该按钮关闭
                    }

                });
            }
        });
    });

    function submitForm() {
        var tableName=	document.getElementsByName("tableName")[0].value; //通常获取的是表单标签name
        table.reload('demo',{
            where: { //设定异步数据接口的额外参数，任意设
                tableName: tableName
            }
            ,page: {
                curr: 1 //重新从第 1 页开始
            }
        });
    }

    $(function() {
        //搜索框回车事件
        $('#tableName').on('keydown', function (event) {
            var code;
            if (event.key !== undefined) {
                code = event.key;
            } else if (event.keyIdentifier !== undefined) {
                code = event.keyIdentifier;
            } else if (event.keyCode !== undefined) {
                code = event.keyCode;
            }
            if (code == 13) {
                submitForm();
                return false
            }
        });
    })
</script>
</body>
</html>